<template>
    <div class="app-container">
        <div class="filter-container">
          <el-form inline>
            <el-form-item label="手机号：" class="filter-item">
              <el-input placeholder="请输入手机号" size="medium" v-model="tellNumer"></el-input>
            </el-form-item>
            <el-form-item label="用户等级：" class="filter-item">
              <el-select size="medium" v-model="memberLevel" placeholder="请选择">
                  <el-option
                  v-for="item in options"
                  :key="item.label"
                  :label="item.label"
                  :value="item.value">
                  </el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="filter-item right">
              <el-button icon="el-icon-search" plain type="primary" @click="search" size="medium">搜索</el-button>
            </el-form-item>
          </el-form>
        </div>
        <article>
          <el-table border :data="dataList">
            <el-table-column prop="id" label="S用户ID" align="center" min-width="120px" >
            </el-table-column>
            <el-table-column prop="memberTime" label="成为S0用户时间" align="center" min-width="180px">
            </el-table-column>
            <el-table-column prop="memberLevel" label="用户等级" align="center" min-width="120px">
            </el-table-column>
            <el-table-column prop="mobile" label="手机号" align="center" min-width="150px">
            </el-table-column>
            <el-table-column label="邀请人数（人）" align="center" min-width="120px">
              <template slot-scope="scope">
                  <span style="color:#409EFF;cursor:pointer" @click="Invitation(scope.row.userId)">{{scope.row.inviteNumber}}</span>
              </template>
            </el-table-column>
            <el-table-column label="总返利（RM）" align="center" min-width="120px">
              <template slot-scope="scope">
                <span style="color:#409EFF;cursor:pointer" @click="toOrderList(scope.row)">{{scope.row.totalCommission|divideFilter}}</span>
              </template>
            </el-table-column>
            <el-table-column label="提现积分" align="center" min-width="120px">
              <template slot-scope="scope">
                <span style="color:#409EFF;cursor:pointer" @click="toUserWithdrawals(scope.row.mobile)">{{scope.row.cashAmount|divideFilter}}</span>
              </template>
            </el-table-column>
            <!-- <el-table-column fixed="right" label="操作" align="center" width="200px">
                <template slot-scope="scope">
                    <span>升级（2.0）</span>
                </template>
            </el-table-column> -->
          </el-table>
          <list-pagination :total="total" :page="page" :pageSize="pageSize" :handleSizeChange="handleSizeChange" :handleCurrentChange="handleCurrentChange"></list-pagination>
        </article>
        <el-dialog
            title="绑定关联用户信息"
            :visible.sync="dialogVisible"
            width="700px"
            >
            <div class="editGoodsGounp">
                <el-table border :data="list">
                    <el-table-column prop="id" label="绑定用户ID" align="center" min-width="120px" >
                    </el-table-column>
                    <el-table-column prop="mobile" label="绑定用户手机号" align="center" min-width="150px">
                    </el-table-column>
                    <el-table-column prop="memberLevel" label="绑定用户等级" align="center" min-width="150px">
                    </el-table-column>
                    <el-table-column fixed="right" prop="inviteTime" label="邀请成功时间" align="center" width="200px">
                    </el-table-column>
                </el-table>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="dialogVisible=false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import list from '@/mixins/List'
import listPagination from '@/components/ListPagination'
import {
  invitedMemberInfopage, memberInfopage
} from '@/api/adminOperation'
export default {
  name: 'screenAdList',
  mixins: [list],
  data () {
    return {
      dataList: [],
      list: [],
      tellNumer: '',
      adminGrade: '',
      memberLevel: '',
      screenList: {
        page: '1',
        pageSize: '10'
      },
      msgList: {

      },
      creenList: {
        pageNum: 1,
        pageSize: 10
      },
      totals: '',
      dialogVisible: false,
      options: [{
        value: '0',
        label: 's0'
      }, {
        value: '1',
        label: 's1'
      }, {
        value: '2',
        label: 's2'
      }, {
        value: '3',
        label: 's3'
      }, {
        value: '4',
        label: 's4'
      }, {
        value: '5',
        label: 's5'
      }, {
        value: '6',
        label: 's6'
      }]
    }
  },
  components: {
    listPagination
  },
  watch: {

  },
  mounted () {
    this.getList()
  },
  methods: {
    async getList () { // 列表
      this.msgList.pageNum = this.page
      this.msgList.pageSize = this.pageSize
      let { data } = await memberInfopage(
        this.msgList
      )
      this.dataList = data.list
      this.total = data.total
      for (let item of this.dataList) {
        let memberLevel = ['s0', 's1', 's2', 's3', 's4', 's5', 's6']
        item.memberLevel = memberLevel[item.memberLevel]
      }
    },
    Invitation (userId) {
      this.dialogVisible = true
      this.creenList.userId = userId
      invitedMemberInfopage(
        this.creenList
      ).then(res => {
        this.list = res.data.list
        for (let item of this.list) {
          let memberLevel = ['s0', 's1', 's2', 's3', 's4', 's5', 's6']
          item.memberLevel = memberLevel[item.memberLevel]
        }
        // this.tatals = this.list.length
      })
    },
    search () {
      this.msgList.mobile = this.tellNumer
      this.msgList.memberLevel = this.memberLevel
      this.getList()
    },
    toOrderList ({ mobile }) {
      this.$router.push({
        path: '/order/orderList',
        query: {
          mobile: mobile
        }
      })
    },
    toUserWithdrawals (mobile) {
      this.$router.push({
        path: 'userWithdrawals',
        query: {
          mobiles: mobile
        }
      })
    },
    resetSearch () {
      this.tellNumer = ''
      this.memberLevel = ''
    }
    // handleSizeChange (val) {
    //   this.screenList.page = val
    //   this.Invitation()
    // },
    // handleCurrentChange (val) {
    //   this.screenList.pageSize = val
    //   this.Invitation()
    // }
  }
}
</script>
<style lang="scss" scoped>
    header{
        height:60px;
        width:100%;
        padding:12px 0;
        .containerH{
            width:100%;
            height: 36px;
            line-height:36px;
            font-size:14px;
            span:nth-child(1){
                width:60px;
                height:36px;
                display:inline-block
            }
            span:nth-child(2){
                width:220px;
                height:36px;
                display:inline-block
            }
            span:nth-child(3){
                width:70px;
                height:36px;
                margin-left:20px;
                display:inline-block
            }
            span:nth-child(4){
                width:220px;
                height:36px;
                display:inline-block
            }
        }
    }
    .editGoodsGounp {
      width: 100%;
      height: auto;
      padding: 20px 0;

    }
</style>
